@charset "utf-8";
@import "reset";
$fs:170.66px;
html {
    font-size: $fs;
}

@function r($px) {
    @return $px/$fs*1rem;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f7f7f7;
    margin-bottom: r(80px);
    button {
        outline: none;
    }
}

header {
    border-bottom: r(1px) solid #c1c1c1;
    .container {
        display: flex;
        width: 100%;
        height: r(88px);
        font-size: 0px;
        .item {
            font-size: r(35px);
            button {
                outline: none;
                width: r(22px);
                height: r(37px);
                font-size: r(40px);
                background-color: #f7f7f7;
                color: #848689;
            }
        }
        //      返回按钮
        .item:first-of-type {
            margin-top: r(26px);
            margin-left: r(29px);
        }
        //      标题
        .item:nth-of-type(2) {
            margin-top: r(27px);
            margin-left: r(196px);
            color: #333333;
        }
        //      收款记录
        .item:last-of-type {
            margin-top: r(27px);
            margin-left: r(110px);
            button {
                color: #666666;
                font-size: r(28px);
                width: 100%;
            }
        }
    }
}

.pink_logo {
    width: r(125px);
    height: r(124px);
    font-size: 0;
    position: absolute;
    //  left: r(257px);
    //  top: r(53px);
    left: r(256px);
    top: r(140px);
    img {
        width: 100%;
        height: 100%;
    }
}

section {
    margin-top: r(238px);
    .box_sec {
        .Reason {
            height: r(94px);
            background-color: #FFFFFF;
            border-top: r(1px) solid #e1e2e4;
            display: flex;
            font-size: 0;
            align-items: center;
            p {
                font-size: r(26px);
                margin-left: r(30px);
            }
            input[type="text"] {
                font-size: r(26px);
                height: r(32px);
                border: 0;
                margin-top: r(8px);
                margin-left: r(77px);
            }
        }
        .receivablesBtn_div {
            margin-left: r(39px);
            .receivablesBtn {
                width: r(560px);
                height: r(80px);
                background-color: #cc3333;
                color: #FFFFFF;
                font-size: r(35px);
                border-radius: r(8px);
            }
        }
    }

    .msg-box{
    width: r(249px);
    height: r(183px);
    background: rgba(0, 0, 0, .7);
    color: white;
    text-align: center;
    position: absolute;
    left: r(640px)/2 - r(125px);
    top: 30%;
    border-radius: r(18px);
    font-size: 0;
    padding: r(30px);
    display: none;
    .msg-img{
        margin-bottom: r(15px);
        img{
            width: r(69px);
            height: r(69px);
        }
    }
    >p{
        font-size: r(28px);
    }
}

}

footer {
    .Explain {
        margin-left: r(251px);
        margin-bottom: r(420px);
        font-size: 0;
        p {
            a {
                font-size: r(20px);
            }
        }
    }
}

.QR_code_bg {
    width: 100%;
    height: 100%;
    background-color: #555556;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.8;
    display: none;
}

.bg_white_bg {
    background-color: #ffffff;
    position: absolute;
    width: r(545px);
    height: r(700px);
    top: r(180px);
    left: r(48px);
    font-size: 0;
    display: none;
    .code{
        width:r(268px);
        height: r(268px);
        margin-top: r(52px);
        margin-left: r(139px);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .number_money{
        margin-left: r(216px);
        margin-top: r(20px);
        p:first-of-type{
            font-size: r(36px);
            color: #888888;
        }
        p:last-of-type{
            margin-top: r(6px);
            font-size: r(20px);
            color: #888888;
        }
    }
    .button_two{
        margin-left: r(18px);
        margin-top: r(72px);
        button{
            font-size: r(30px);
            width: r(505px);
            height: r(80px);
            border-radius: r(8px);
        }
        button:first-of-type{
            background-color: #0aba07;
            border: r(1px) solid #039c00; 
            color: #FFFFFF;  
        }
        button:last-of-type{
            background-color: #f4f5f6;
            margin-top: r(19px);
            border: r(1px) solid #b7b7b7;
            color: #666666;
        }
    }
}